<template>
  <div class="box">
    <el-skeleton :loading="loading">
      <template v-if="!courseList.length">
        <section>
          <h2>
            <el-dropdown
              trigger="click"
              placement="bottom-start"
              @command="add($event)"
            >
              <el-button type="primary" size="medium" icon="el-icon-circle-plus"
                >添加课次</el-button
              >
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="null">添加同步课</el-dropdown-item>
                  <el-dropdown-item command="期中考">添加期中考</el-dropdown-item>
                  <el-dropdown-item command="期末考">添加期末考</el-dropdown-item>
                  <el-dropdown-item command="活动课">添加活动课</el-dropdown-item>
                  <el-dropdown-item command="other">批量加课次</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </h2>
          <div class="steps">
            <ul>
              <li>
                <img src="/src/assets/course/step-1.png" alt="1.添加课次" />
                <h4>1.添加课次</h4>
              </li>
              <li>
                <img src="/src/assets/course/step-2.png" alt="2.选择章节" />
                <h4>2.选择章节</h4>
              </li>
              <li>
                <img src="/src/assets/course/step-3.png" alt="3.完成" />
                <h4>3.完成</h4>
              </li>
            </ul>
            <ol>
              <li>同步课：选择章节后，将按照章节创建课次，并自动绑定资料</li>
              <li>
                期中考试、期末考试、活动课、其他课类型：无需选择章节，直接创建课次，并手动绑定资料
              </li>
            </ol>
          </div>
        </section>
      </template>

      <template v-else>
        <header class="course-header">
          <el-dropdown
            trigger="click"
            placement="bottom-start"
            @command="add($event, 1)"
          >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-circle-plus"
              @click.stop
              >添加课次</el-button
            >
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="null">添加同步课</el-dropdown-item>
                <el-dropdown-item command="期中考">添加期中考</el-dropdown-item>
                <el-dropdown-item command="期末考">添加期末考</el-dropdown-item>
                <el-dropdown-item command="活动课">添加活动课</el-dropdown-item>
                <el-dropdown-item command="other">批量加课次</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="course-action">
            <span>课次数：<i>{{ courseList.length }}</i></span>
            <el-button type="text" @click="empty">清空课次</el-button>
          </div>
        </header>
        <el-collapse
          @change="slideHandle"
          v-model="activeList"
          ref="collapseRef"
        >
          <draggable
            :modelValue="courseList"
            v-model="activeList"
            @update:modelValue="courseSort"
            ghost-class="ghost"
            chosen-class="choose-class"
            @start="dragOnStart"
            animation="0"
            item-key="id"
          >
            <template #item="{ element, index }">
              <el-collapse-item :name="index">
                <template #title>
                  <div class="title">
                    <i
                      :class="[
                        `el-icon-caret-${
                          activeList.some((idx) => index === idx)
                            ? 'bottom'
                            : 'right'
                        }`,
                      ]"
                    />
                    <span>第{{ index + 1 }}讲</span>
                    <el-input
                      @click.stop
                      placeholder="请输入课次名称"
                      v-model="element.courseIndexName"
                      @blur="updateCourse(element)"
                      @keyup.stop
                    />
                    <div class="actions">
                      <el-button
                        size="small"
                        type="text"
                        @click.stop="bind(element, index)"
                        >绑定资料</el-button
                      >
                      <el-divider direction="vertical" />
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="上移"
                        placement="bottom"
                      >
                        <i
                          class="icon iconfont iconshangyi"
                          @click.stop="move(index, 1)"
                          :class="{ 'is-disable': index == 0 }"
                        ></i>
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="下移"
                        placement="bottom"
                      >
                        <i
                          class="icon iconfont iconxiayi"
                          @click.stop="move(index, -1)"
                          :class="{
                            'is-disable': index == courseList.length - 1,
                          }"
                        ></i>
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="删除"
                        placement="bottom"
                      >
                        <i
                          class="icon iconfont iconshanchu"
                          style="color: red"
                          @click.stop="remove(element.id, index)"
                        ></i>
                      </el-tooltip>
                    </div>
                  </div>
                  <el-dropdown
                    trigger="click"
                    placement="bottom-start"
                    @command="add($event, index + 1)"
                  >
                    <el-button
                      type="primary"
                      size="mini"
                      icon="el-icon-circle-plus"
                      @click.stop
                    >添加课次</el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item :command="null">添加同步课</el-dropdown-item>
                        <el-dropdown-item command="期中考">添加期中考</el-dropdown-item>
                        <el-dropdown-item command="期末考">添加期末考</el-dropdown-item>
                        <el-dropdown-item command="活动课">添加活动课</el-dropdown-item>
                        <el-dropdown-item command="other">批量加课次</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
                <el-skeleton :loading="element.loading">
                  <cus-empty
                    v-if="
                      !element.dataMap ||
                      (!element.dataMap.materials.length &&
                        !element.dataMap.papers.length)
                    "
                  />
                  <template v-else>
                    <div class="data-list">
                      <div
                        class="data-cell"
                        v-for="(data, idx) in element.dataMap.materials"
                        :key="data.id"
                      >
                        <div class="cover">
                          <el-image
                            :src="`${filePathBase}${data.imgPath}`"
                            fit="cover"
                          ></el-image>
                        </div>
                        <p>{{ data.fileName }}</p>
                        <div class="mask">
                          <div class="btns">
                            <div @click="preview(data)"><span>预览</span></div>
                            <div @click="removeData(element, idx, 1)">
                              <span>删除</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        class="data-cell"
                        v-for="(data, idx) in element.dataMap.papers"
                        :key="data.id"
                      >
                        <div class="cover">
                          <el-image
                            src="/src/assets/course/paper-cover.png"
                            fit="cover"
                          ></el-image>
                        </div>
                        <p>{{ data.title }}</p>
                        <div class="mask">
                          <div class="btns">
                            <div @click="preview(data, 2)">
                              <span>预览</span>
                            </div>
                            <div @click="removeData(element, idx, 2)">
                              <span>删除</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="clear-button">
                      <el-button
                        size="small"
                        type="text"
                        @click.stop="clear(element)"
                        >清空所有资料</el-button
                      >
                    </div>
                  </template>
                </el-skeleton>
              </el-collapse-item>
            </template>
          </draggable>
        </el-collapse>
      </template>
    </el-skeleton>
  </div>
</template>

<script lang="ts">
import { computed, Ref, ref } from "vue";
import $, { drawer, useState, clone } from "$";
import CheckChapterComponent from "./components/check-chapter.vue";
import CheckDataComponeent from "./components/check-data.vue";
import store from "@/views/course/update/store";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import draggable from "vuedraggable";
import axios from "axios";
import Screen from "@/utils/screen";
import AEditContent from "@/views/handout/index.vue";

export default {
  components: { draggable },
  setup() {
    /* 课程信息 */
    let courseInfo = computed(() => store.state.courseInfo);

    /* 课次列表 */
    let [courseList, setCourseList] = useState<any[]>([]);

    /* 控制课次展开收起三角箭头 => 当前展开行的 Index 值 */
    let [activeList, setActiveList] = useState<number[]>([]);

    /* 请求课次列表loading */
    let [loading, setLoading] = useState(true);

    const collapseRef: Ref<any> = ref();
    /* 获取课次列表数据 */
    const __request = async () => {
      setLoading(true);
      let res = await $.http.json("/courseIndex/query", {
        courseId: courseInfo.value.id,
      });
      setLoading(false);
      setCourseList(res.json);
    };
    __request();
    const dragOnStart = (e) => {
      e.item.style.background = "#99d6d2";
    };
    /*
     * @function 添加课次
     * @param courseIndexName
     *        null => 同步课选择    string => 档次课次名称    other => 其他课（其他课需要指定次数）
     *
     * @param index 添加课次的下标，在此添加课次
     */
    const add = async (courseIndexName, index = 0) => {
      let cloneList: any[] = clone(courseList.value);
      if (courseIndexName === "other") {
        let { value } = await ElMessageBox.prompt(
          "请输入课次数量",
          "课次数量",
          {
            inputValue: "1",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputType: "number",
            inputPattern: /^[1-9]\d*$/,
            inputErrorMessage: "请输入正确的课次数量",
          }
        );
        let data = Array.from(new Array(Number(value)), (i, idx) => ({
          courseId: courseInfo.value.id,
          courseIndexName: `第${index + idx + 1}讲`,
        }));
        cloneList.splice(index, 0, ...data);
      } else if (courseIndexName) {
        cloneList.splice(index, 0, {
          courseId: courseInfo.value.id,
          courseIndexName,
        });
      } else {
        let chapterNodes = await drawer.create({
          title: "选择章节",
          zIndex: 2010,
          width: 400,
          component: CheckChapterComponent,
        });
        console.log(chapterNodes);
        let data = chapterNodes.map((node) => ({
          courseId: courseInfo.value.id,
          courseIndexName: node.parentPathName?node.parentPathName.replace(new RegExp("#","gm"),"") + " " + node.name : node.name,
          chapterIds: [node.id],
        }));
        cloneList.splice(index, 0, ...data);
        console.log(cloneList);
      }
      let res = await $.http.json("courseIndex/batchSaveOrUpdate", cloneList);
      res.result && ElMessage.success("添加课次成功~！");
      __request();
    };

    /* 删除课次 */
    const remove = async (id, index) => {
      let res = await $.http.post("courseIndex/delete", { id });
      if (res.result) {
        activeList.value.splice(
          activeList.value.findIndex((i) => i === index),
          1
        );
        courseList.value.splice(index, 1);
        ElMessage.success("删除课次成功~！");
      }
    };

    /* 清空课次资料 */
    const clear = async (courseIndexId) => {
      let res = await $.http.post("courseIndex/clearAllMaterial", {
        courseIndexId: courseIndexId.id,
      });
      res.result && ElMessage.success("清空资料成功~！");
      courseIndexId.dataMap.materials = [];
    };

    /**
     * @function 展开收起回调
     * @param indexList 当前展开行的 下标集合
     *
     * @description 如果展开行 无dataMap字段 则代表还为获取过数据，需从服务器获取
     */
    const slideHandle = async (indexList) => {
      setActiveList(indexList);
      indexList.map(async (index) => {
        let data = courseList.value[index];
        if (!data.dataMap) {
          data.loading = true;
          let res = await $.http.post("courseIndex/queryMaterials", {
            courseIndexId: data.id,
          });
          data.dataMap = res.json;
          data.loading = false;
        }
      });
    };

    /* 删除课次下资料 */
    const removeData = async (course, idx, type: 1 | 2) => {
      let courseIndexId = course.id;
      let params = {
        courseIndexId,
        type,
        materialId: course.dataMap[type === 1 ? "materials" : "papers"][idx].id,
      };
      let res = await $.http.post("courseIndex/deleteMaterial", params);
      res.result &&
        course.dataMap[type === 1 ? "materials" : "papers"].splice(idx, 1);
      res.result && ElMessage.success("删除资料成功~！");
    };

    /*
     * @function 为课次绑定资料
     */
    const bind = async (course, index: number) => {
      !activeList.value.includes(index) &&
        setActiveList([...activeList.value, index]) &&
        slideHandle(activeList.value);
      drawer.create({
        width: 820,
        zIndex: 2010,
        component: CheckDataComponeent,
        props: {
          subjectCode: courseInfo.value.subjectId,
          addData: (type, data) => __courseAddData(course.id, data, type),
        },
        footed: false,
      });
    };
    /*
     * @param courseIndexId 当前课次Id
     * @param data 资料或试卷信息
     * @param type  1 => 资料  2 => 试卷
     */
    const __courseAddData = async (courseIndexId, data, type: 1 | 2) => {
      let url = type === 1 ? "addMaterials" : "addPaper";
      let params = { courseIndexId };
      params[type === 1 ? "materialId" : "paperId"] = data.id;
      let res = await $.http.post(`courseIndex/${url}`, params);
      res.result &&
        ElMessage.success(`添加${type === 1 ? "资料" : "试卷"}成功~！`);
      let findData = courseList.value.find((c) => c.id === courseIndexId);
      if (findData.dataMap) {
        if (type === 1) {
          findData.dataMap.materials.push(data);
        } else {
          findData.dataMap.papers.push(data);
        }
      }
    };

    /* 修改课次名称 blur 触发 */
    const updateCourse = async (data) => {
      await $.http.json("/courseIndex/modify", data);
    };
    let filePathBase = import.meta.env.VITE_APP_BASE_URL;

    /* 课次排序 */
    const courseSort = async (list) => {
      let res = await $.http.json(
        "courseIndex/batchSaveOrUpdate",
        list.map((node) => ({
          id: node.id,
          courseId: node.courseId,
          courseIndexName: node.courseIndexName,
        }))
      );
      // res.result && ElMessage.success("添加课次顺序成功~！");
      setCourseList(list);
    };

    const move = (index, type) => {
      if (type === 1) {
        let x = index;
        let y = index + 1;
        courseList.value.splice(
          x - 1,
          1,
          ...courseList.value.splice(y - 1, 1, courseList.value[x - 1])
        );
      } else {
        let x = index + 1;
        let y = index + 2;
        courseList.value.splice(
          x - 1,
          1,
          ...courseList.value.splice(y - 1, 1, courseList.value[x - 1])
        );
      }
      courseSort(courseList.value)
    };
    const preview = async (data, type = 1) => {
      if (type == 2) {
        if (data.sourceFrom === 3) {
          const loading = ElLoading.service({
            lock: true,
            background: "rgba(255, 255, 255, .7)",
            text: "加载中...",
          });
          let src = `${$.utils.generatBasePath()}furl=${
            import.meta.env.VITE_APP_BASE_URL
          }${data.filePath}`;
          let closeBtn = $.element("div", {
            className: "el-icon-close",
            style: {
              width: "36px",
              height: "36px",
              lineHeight: "36px",
              textAlign: "center",
              background: "#fff",
              borderRadius: "50%",
              fontSize: "24px",
              position: "fixed",
              top: "40px",
              right: "40px",
              zIndex: "10",
              cursor: "pointer",
            },
            on: {
              click: () => {
                container.remove();
              },
            },
          });
          let iframe = $.element("iframe", {
            attrs: { src, width: "100%", height: "100%" },
            style: { background: "#f9f9f9" },
          });
          iframe.onload = loading.close;
          let container = $.element(
            "div",
            {
              style: {
                width: "100%",
                height: "100%",
                position: "absolute",
                top: "0",
                left: "0",
                zIndex: "3200",
              },
            },
            [closeBtn, iframe]
          );
          document.body.appendChild(container);
        } else {
          window.open(`./#/test-paper-edit/true/${data.id}`);
        }
        return;
      }
      /* 待添加是否为试卷判断------------------- */
      const loading = ElLoading.service({
        lock: true,
        background: "rgba(255, 255, 255, .7)",
        text: "加载中...",
      });
      let src = `${$.utils.generatBasePath()}furl=${
        import.meta.env.VITE_APP_BASE_URL
      }${data.filePath}`;

      let container: HTMLElement | null = null;
      let closeBtn = $.element("div", {
        className: "el-icon-close",
        style: {
          width: "36px",
          height: "36px",
          lineHeight: "36px",
          textAlign: "center",
          background: "#fff",
          borderRadius: "50%",
          fontSize: "24px",
          position: "fixed",
          top: "40px",
          right: "40px",
          zIndex: "10",
          cursor: "pointer",
        },
        on: {
          click: () => {
            container?.remove();
          },
        },
      });
      if (data.ext === "html") {
        Screen.create(
          AEditContent,
          { handout: data&&data.id, classPreview: true, isBtns: true, isClose: true },
          { zIndex: '3000', hiddenBack: false }
        );
        loading.close();
        return;
      } else if (data.ext === "mp3") {
        let video = $.element("video", {
          attrs: {
            src: `${import.meta.env.VITE_APP_BASE_URL}${data.filePath}`,
            width: "",
            height: "",
            controls: "true",
            controlsList: "nodownload",
          },
          style: {
            background: "#333",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%,-50%)",
          },
        });
        video.oncanplay = loading.close;
        video.onerror = loading.close;
        container = $.element(
          "div",
          {
            style: {
              width: "100%",
              height: "100%",
              background: "rgba(0,0,0,.8)",
              position: "absolute",
              top: "0",
              left: "0",
              zIndex: "3000",
            },
          },
          [closeBtn, video]
        );
      } else if (data.ext === "mp4") {
        let video = $.element("video", {
          attrs: {
            src: `${import.meta.env.VITE_APP_BASE_URL}${data.filePath}`,
            width: "100%",
            height: "100%",
            controls: "true",
            controlsList: "nodownload",
          },
          style: { background: "#f9f9f9" },
        });
        video.oncanplay = loading.close;
        video.onerror = loading.close;
        container = $.element(
          "div",
          {
            style: {
              width: "100%",
              height: "100%",
              position: "absolute",
              top: "0",
              left: "0",
              zIndex: "3000",
              background: "rgba(0,0,0,.8)",
            },
          },
          [closeBtn, video]
        );
      } else if (["ppt", "pptx", "doc", "docx", "pdf"].includes(data.ext)) {
        let iframe = $.element("iframe", {
          attrs: {
            src,
            width: "100%",
            height: "100%",
            allowfullscreen: "true",
          },
          style: { background: "#f9f9f9" },
        });
        iframe.onload = loading.close;
        iframe.onerror = loading.close;
        container = $.element(
          "div",
          {
            style: {
              width: "100%",
              height: "100%",
              position: "absolute",
              top: "0",
              left: "0",
              zIndex: "3000",
              background: "rgba(0,0,0,.8)",
            },
          },
          [closeBtn, iframe]
        );
      } else if (["zip", "rar", "png", "jpg", "jpeg"].includes(data.ext)) {
        let iframe = $.element("iframe", {
          attrs: { src, width: "100%", height: "100%" },
          style: { background: "#f9f9f9" },
        });
        iframe.onload = loading.close;
        iframe.onerror = loading.close;
        container = $.element(
          "div",
          {
            style: {
              width: "100%",
              height: "100%",
              position: "absolute",
              top: "0",
              left: "0",
              zIndex: "3000",
              background: "rgba(0,0,0,.8)",
            },
          },
          [closeBtn, iframe]
        );
      }
      container && document.body.appendChild(container);
    };

    const empty = async () => {
      let res: any = await axios.post<null, { result: boolean; json: any }>(
        "courseIndex/clearAll",
        { courseId: courseInfo.value.id }
      );
      if (res.result) {
        ElMessage.success("清空课次成功");
        __request();
      }
    };

    return {
      loading,
      courseList,
      add,
      bind,
      preview,
      remove,
      clear,
      activeList,
      slideHandle,
      filePathBase,
      removeData,
      updateCourse,
      courseSort,
      empty,
      dragOnStart,
      collapseRef,
      move,
    };
  },
};
</script>

<style lang="scss" scoped>
:depp(.paper_content) {
  height: 100vh;
}
.box {
  flex: 1 1 70px;
  padding: 50px 90px;
  background: #fff;
  overflow: auto;
  :deep(.el-collapse) {
    .el-collapse-item {
      position: relative;
      transition: all 0.2s;
      border-radius: 4px;
      &:hover {
        box-shadow: 0 0 15px #cccc;
        z-index: 1;
      }
      &:hover .el-dropdown {
        opacity: 1;
      }
      .el-dropdown {
        opacity: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        transform: translateY(45%);
        transition: all 0.25s;
      }
    }
  }
  .course-header {
    display: flex;
    margin-bottom: 20px;
    .course-action {
      margin-left: auto;
      line-height: 28px;
      .el-button {
        margin-left: 12px;
        padding: 0;
        min-height: 0;
      }
    }
  }
}
section {
  &:first-child {
    margin-bottom: 36px;
  }
  h2 {
    display: flex;
    margin-bottom: 20px;
    p {
      margin-left: 10px;
      font-size: 20px;
      line-height: 36px;
    }
  }
  .steps {
    padding: 18px 50px 22px;
    background: #f5f7fa;
    ul {
      display: flex;
      position: relative;
      &::before {
        content: "";
        display: block;
        width: calc(100% - 200px);
        height: 7px;
        background: #d1d4e6;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
      }
      li {
        width: 240px;
        text-align: center;
        position: relative;
        &::after {
          content: "";
          display: block;
          width: 20px;
          height: 20px;
          background: url("/src/assets/course/step-arrow.png") center center /
            cover no-repeat;
          position: absolute;
          top: 44px;
          right: 0;
          margin-right: -40px;
        }
        &:first-child {
          margin-right: auto;
        }
        &:nth-child(2) {
          margin: 0 auto;
        }
        &:last-child {
          margin-left: auto;
          &::after {
            display: none;
          }
        }
        img {
          margin-bottom: 20px;
          position: relative;
          z-index: 1;
        }
        h4 {
          font-size: 16px;
          margin-bottom: 8px;
        }
        p {
          color: #999;
        }
      }
    }
    ol {
      list-style: disc;
      padding: 30px 0 20px 100px;
      li {
        line-height: 40px;
        color: #777;
        font-size: 16px;
      }
    }
  }
}
:deep(.el-collapse-item__header) {
  height: auto;
  .el-collapse-item__arrow {
    display: none;
  }
}
.title {
  width: 100%;
  padding: 20px;
  height: 80px;
  display: flex;
  & > i {
    margin-right: 24px;
    color: #c0c4cc;
    font-size: 20px;
    line-height: 40px;
  }
  & > .el-input {
    width: 600px;
  }
  & > span {
    display: inline-block;
    margin-right: 15px;
    line-height: 40px;
  }
  .actions {
    margin-left: auto;
    & > span {
      color: #999;
      margin-right: 12px;
    }
    .icon {
      color: #72b22a;
      cursor: pointer;
      padding: 4px 5px;
      border-radius: 4px;
      margin: 0 5px;
      &:hover {
        background: #f2f6fc;
      }
    }
    .icon.is-disable {
      background: none !important;
      cursor: no-drop;
      color: #77808d;
    }
    .el-button:last-of-type {
      color: #72b22a;
      font-weight: bold;
    }
  }
}

.data-list {
  padding: 20px 16px 20px 50px;
  display: grid;
  grid-template: auto / repeat(6, 15.8%);
  grid-gap: 1%;
  flex-wrap: wrap;
  position: relative;
  .data-cell {
    width: 140px;
    padding: 10px;
    // margin: 0 10px 10px 0;
    position: relative;
    .cover {
      height: 104px;
      margin-bottom: 6px;
      background: #d8d8d8;
      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      :deep(.el-image) {
        width: 100%;
        height: 100%;
      }
    }
    & > p {
      text-align: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .mask {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      background: rgba($color: #000, $alpha: 0.15);
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: all 0.25s;
      .btns {
        width: 84px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        div {
          color: #72b22a;
          font-size: 12px;
          line-height: 24px;
          text-align: center;
          border-radius: 12px;
          background: #fff;
          cursor: pointer;
          &:last-child {
            margin-top: 10px;
          }
          &:active {
            opacity: 0.8;
          }
          i {
            font-weight: bold;
            margin-right: 3px;
          }
        }
      }
    }
    &:hover {
      .mask {
        opacity: 1;
      }
    }
  }
}
.clear-button {
  padding-left: 30px;
  position: absolute;
  right: 30px;
  top: 65px;
}

.ghost {
  :deep(.el-collapse-item__header) {
    background-color: #f0f2f5 !important;
  }
}
</style>
